<template>

  <div>
    <div class="m_contentBox">
      <a-card :bordered="false">
        <div class="centeet">
    <div class="leftTree" v-show="isAss">
      <div class="select">
        <a-input-search :placeholder="$t('message.Please_enter')" v-model="name" allowClear @search="saveUpdate"/>
      </div>
      <!-- 左侧列表 -->
      <div class="list">
        <div class="listStyle m_hoverCP" v-for="(item, index) in listArr" :key="index" @click="onLisas(item)">
          <img v-if="form.targetId == item.id" src="@/assets/img/img62_a.png" alt=""/>
          <img v-else src="@/assets/img/img63_a.png" alt="" />
          <div class="listStyle_text" :class="{ 'listStyle_text_active': form.targetId == item.id }">
            {{ item.departName }}
          </div>
        </div>
      </div>
      <!-- 展开 -->
      <div class="sizeStyle m_hoverCP" @click="onSizeLeft(false)">
        <img src="@/assets/carbon/img4.png" alt="" />
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item :label="$t('message.Accounting_standard')">
                  <a-select v-model="form.standardId" :placeholder="$t('message.Please_select')" allowClear>
                    <a-select-option v-for="province in provinceData" :key="province.key" :value="province.key">
                      {{ province.title }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item :label="$t('message.Accounting_date')">
                  <a-date-picker v-model="form.year" allowClear :format="monthFormat" :valueFormat="monthFormat" mode="year" :open="yearOpen" @panelChange="opanelChange" @openChange="onopenelChange"/>
                </a-form-item>
              </a-col>
              <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
                <a-col :md="6" :sm="24">
                  <a-button type="primary" @click="searchQuery">{{$t('message.Search')}}</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset">{{$t('message.Reset')}}</a-button>
                </a-col>
              </span>
            </a-row>
          </a-form>
        </div>
      </div>
      <div class="tables">
        <a-button type="primary" @click="handleAdd" class="m_mb24" icon="plus">{{$t('message.new_inventory')}}</a-button>
        <a-table size="middle" :columns="columns" :data-source="dataSource" :pagination="pagination" bordered rowKey="id" @change="onchange">
          <template slot="status" slot-scope="text, record, index">
            <div class="statusStyle" v-if="record.status == 1">{{ $t('message.Archived') }}</div>
            <div class="statusStyle1" v-if="record.status == 2">{{ $t('message.Filled_in') }}</div>
            <div class="statusStyle2" v-if="record.status == 0">{{ $t('message.Filling_in') }}</div>
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <a @click="() => submitAform(record)" v-if="record.status == 0||record.status == 2">{{$t('message.fill_in')}}</a>
              <a @click="() => saveView(record)">{{$t('message.Examine')}}</a>
              <a @click="() => publish(record)" v-if="record.status == 2">{{$t('message.Archive')}}</a>
              <a @click="handleDetail(record)">{{$t('message.report_Progress')}}</a>
              <a-popconfirm :title="$t('message.Confirm_delete')" :cancelText="$t('message.Cancel')"
                :okText="$t('message.Confirm')" v-if="record.status == 0" @confirm="() => saveDelte(record.id)">
                <a>{{$t('message.Delete')}}</a>
              </a-popconfirm>
              <a @click="() => revocationOnArchivist(record.id)" v-if="record.status == 1&&isOrgAdmin ">{{$t('message.withdraw_archive')}}</a>
            </div>
          </template>
        </a-table>
      </div>
      <div class="sizeStyle1 m_hoverCP" @click="onSizeLeft(true)" v-if="!isAss">
        <img src="@/assets/carbon/img5.png" alt="" />
      </div>
    </div>
    <a-modal :title="$t('message.new_organization_carbon_inventory')" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <a-form-model  :rules="rules" :model="newForm" ref="ruleForm">
        <a-form-model-item :label="$t('message.Accounting_entity')" prop="targetId">
          <a-select style="width: 100%" :placeholder="$t('message.Please_select')" v-model="newForm.targetId">
            <a-select-option v-for="province in listArr" :key="province.id" :value="province.id">
              {{ province.departName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :label="$t('message.Accounting_standard')" prop="standardId">
          <a-select style="width: 100%" :placeholder="$t('message.Please_select')" v-model="newForm.standardId">
            <a-select-option v-for="province in provinceData" :key="province.key" :value="province.key">
              {{ province.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <div>
          <div class="colors"><span>*</span> {{$t('message.Accounting_date')}}：</div>
          <a-date-picker v-model="newForm.year" :format="monthFormat" :value-format="monthFormat" mode="year" :open="oprnYerOpen" @panelChange="newFormpanelChange" @openChange="onPrnYerOpenlChange"/>
        </div>
        <div v-if="plpds" style="color: red; margin-left: 100px">{{$t('message.please_select_accounting_time')}}</div>
      </a-form-model>
    </a-modal>
    <!-- 填报进度抽屉 -->
    <progessDrawer ref="modalForm" @ok="modalFormOk"></progessDrawer>
    <section class="m_popupBox" v-if="isShowDetailPopup">
      <tpyzDetail
          ref="tpyzDetail"
          addUrl="/orgCarbonEmissionSource/addSystemFromUser"
          editUrl="/orgCarbonEmissionSource/editFromUser"
          saveUrl="/orgCheckTemplate/addFromAdmin"
          @back="back"
          :type="2"
          :queryId="queryId"
          :newForm="newForm">
      </tpyzDetail>
    </section>
        </div>
      </a-card>
    </div>
  </div>
</template>
<script>
import { getAction, postAction, deleteAction } from "@api/manage";
import progessDrawer from './modules/progessDrawer'
import tpyzDetail from "@comp/common/tpyzDetail.vue";
import moment from "moment";
import { USER_INFO } from '@/store/mutation-types'
import Vue from 'vue'
import {cloneObject} from "@/utils/util";
export default {
  name: "equipment",
  components: {
    tpyzDetail,
    progessDrawer
  },
  data() {
    return {
      isOrgAdmin:Vue.ls.get(USER_INFO).isOrgAdmin,
      plpds: false,
      isAss: true,
      isShowDetailPopup: false,
      queryId: "",
      name: "", //主体查询
      provinceData: [],
      listArr: [],
      dataSource: [],
      visible: false,
      monthFormat: "YYYY",
      yearOpen: false,
      oprnYerOpen: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      columns: [
        {
          title: this.$t('message.Accounting_entity'),
          dataIndex: "targetName",
          align: "center",
        },
        {
          align: "center",
          title: this.$t('message.Accounting_standard'),
          dataIndex: "standardName",
        },
        {
          align: "center",
          title: this.$t('message.Accounting_date'),
          dataIndex: "year",
        },
        {
          align: "center",
          title: this.$t('message.State'),
          dataIndex: "status",
          scopedSlots: { customRender: "status" },
        },
        {
          title: `${this.$t('message.Total_carbon_emissions')}（tCO2e）`,
          align: "center",
          dataIndex: "totalCarbon",
        },
        {
          title: `${this.$t('message.energy_consumption_and_emission')}（tCO2e）`,
          align: "center",
          dataIndex: "costCarbon",
        },
        {
          title: `${this.$t('message.Green_emission_reduction')}（tCO2e）`,
          dataIndex: "greenCarbon",
          align: "center",
        },
        {
          title: this.$t('message.Accountant'),
          dataIndex: "checkPeople_dictText",
          align: "center",
        },
        {
          title: this.$t('message.Update_date'),
          dataIndex: "updateTime",
          align: "center",
        },
        {
          title: this.$t('message.Handle'),
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
          align: "center",
          width: '200px',
        },
      ],
      newForm: {
        targetId: "",
        standardId: undefined,
        year: undefined,
        checkId: "",
      },
      form: {
        year: "",
        targetId: "",
        standardId: undefined, //核算标准
        pageNo: 1,
        pageSize: 10,
      },
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      rules: {
        targetId: [
          { required: true, message: this.$t('message.please_select_accounting_entity'), trigger: "blur" },
        ],
        standardId: [
          { required: true, message: this.$t('message.please_select_accounting_standard'), trigger: "blur" },
        ],
        year: [{ required: true, message: this.$t('message.please_select_accounting_time'), trigger: "blur" }],
      },
    };
  },
  mounted() {
    //核算主体
    this.saveUpdate();
    //核算标准
    this.loadTreeRoot();
  },
  methods: {
    // 填报进度
    handleDetail:function(record){
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = this.$t('message.report_Progress');
    },
    /**
     *撤回归档
     */
     revocationOnArchivist(value){
      getAction("/orgCheckCheck/republish", {
        id: value,
      }).then((res) => {
        if (res.success) {
          this.getData(1)
        }
      });
    },
    back() {
      this.isShowDetailPopup = false;
      this.getData(1);
    },
    /**
     *时间选择
     */
    onopenelChange(status) {
      this.yearOpen = status;
    },
    opanelChange(value, mode) {
      console.log(value, mode);
      this.form.year = moment(value).format("YYYY");
      this.yearOpen = false;
    },
    onPrnYerOpenlChange(status) {
      this.oprnYerOpen = status;
    },
    newFormpanelChange(value, mode) {
      this.newForm.year = moment(value).format("YYYY");
      console.log(this.newForm.year);
      this.oprnYerOpen = false;
    },
    /**
     * 归档
     */
     publish(value){
      getAction("/orgCheckCheck/publish", {
        id: value.id,
      }).then((res) => {
        if (res.success) {
          this.getData(1)
        }
      });
     },
     /**
     * 查看
     */
     saveView(value){
      this.newForm.checkId =value.id;
      this.newForm.standardId=value.standardId
      this.newForm.status=value.status
      this.newForm.year=value.year
      this.isShowDetailPopup = true;
     },
    /**
     * 填报
     */
    submitAform(value) {
      console.log(value)
      this.newForm.checkId =value.id;
      this.newForm.standardId=value.standardId
      this.newForm.year=value.year
      this.newForm.status=value.status
      console.log(this.newForm)
      this.isShowDetailPopup = true;
    },
    /**
     *新增
     */
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.newForm.year) {
            this.plpds = true;
            return;
          } else {
            this.plpds = false;
          }
          postAction("/orgCheckCheck/createNewCommonCheck", {
            standardId: this.newForm.standardId,
            checkTargetId: this.newForm.targetId,
            year: this.newForm.year,
          }).then((res) => {
            if (res.success) {
              this.newForm.checkId = res.result.id;
              this.visible = false;
              this.isShowDetailPopup = true;
            }else{
              this.$message.warning(res.message);
            }
          });
        } else {
          if (!this.newForm.year) {
            this.plpds = true;
          }
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 选择主体
     */
    onLisas(value) {
      this.form.targetId = value.id;
      this.newForm.targetId = value.id;
      this.form.year = undefined;
      this.form.standardId = undefined;
      console.log(this.newForm.targetId, "this.newForm.targetId");
      this.getData(1);
    },

    /**
     * 分页查询
     */
    getData(page) {

      if (page === 1) {
        this.pagination.current = 1;
      }
      let reqData = cloneObject(this.form)
      reqData.pageNo = this.pagination.current
      reqData.pageSize = this.pagination.pageSize
      getAction("/orgCheckCheck/getPageList", reqData).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.pagination.total = res.result.total;
        }
      });
    },
     /**
     * 核算标准
     */
     loadTreeRoot(value) {
      console.log(value);
      getAction("/sys/category/loadTreeRoot", {
        pcode: "A01",
        async: true,
      }).then((res) => {
        if (res.success) {
          this.provinceData = res.result;
        }
      });
    },
    /**
     * 核算主体
     */
    saveUpdate(value) {
      console.log(value);
      getAction("/orgDept/getOrgAllSubjectOfCostCalc", {
        name: this.name,
      }).then((res) => {
        if (res.success) {
          this.listArr = res.result;
          this.form.targetId = this.listArr[0].id;
          this.newForm.targetId = this.listArr[0].id;
          this.getData(1);
        }
      });
    },
    //缩放
    onSizeLeft(value) {
      this.isAss = value;
    },
    //查询
    searchQuery() {
      this.getData(1);
    },
    //删除
    saveDelte(value) {
      getAction("/orgCheckCheck/deleteById", {
        id: value,
      }).then((res) => {
        if (res.success) {
          this.getData(1);
        }else{
          this.$message.error(res.message)
        }
      });
    },
    //重置
    searchReset() {
      this.form.year = undefined;
      this.form.standardId = undefined;
      this.getData(1);
    },
    //分页
    onchange(pagination, filters, sorter) {
      this.pagination = pagination;
      this.getData();
    },
    //打开抽屉
    handleAdd() {
      this.visible = true;
    },
    //关闭
    handleCancel() {
      this.visible = false;
    },
    onContextMenuClick(treeKey, menuKey) {
      console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
    },
  },
};
</script>
<style lang="less" scoped>
.flexs {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.colors {
  span {
    color: red;
  }
}
.editable-row-operations {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}
.statusStyle {
  padding: 5px 12px;
  font-weight: 400;
  font-size: 14px;
  color: #2ba471;
  width: 66px;
  background: #e3f9e9;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #2ba471;
  margin: 0 auto;
  white-space: nowrap;
}
.statusStyle1 {
  padding: 5px 12px;
  font-weight: 400;
  width: 66px;
  font-size: 14px;
  margin: 0 auto;
  color: #0052d9;
  background: #f2f3ff;
  border-radius: 3px 3px 3px 3px;
  white-space: nowrap;
  border: 1px solid #0052d9;
}
.statusStyle2 {
  padding: 5px 12px;
  width: 66px;
  margin: 0 auto;
  font-weight: 400;
  font-size: 14px;
  color: #e37318;
  white-space: nowrap;
  background: #fff1e9;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #e37318;
}
.sizeStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: -16px;
  width: 16px;
  height: 46px;
  background: #ffffff;
  border-radius: 0px 5px 5px 0px;
  border: 1px solid #e7e7e7;
  z-index: 9;
  img {
    width: 16px;
    height: 16px;
  }
}
.sizeStyle1 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 0px;
  width: 16px;
  height: 46px;
  background: #ffffff;
  border-radius: 0px 5px 5px 0px;
  border: 1px solid #e7e7e7;
  z-index: 9;
  img {
    width: 16px;
    height: 16px;
  }
}
.list {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  .listStyle {
    //padding: 4px;
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    flex: 1;
    img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
  }

  .listStyle_text {
    flex: 1;
    padding: 4px;
    line-break: anywhere;
  }

  .listStyle_text_active {
    background: #ecfff7;
  }
}

.right {
  background: #fff;
  position: relative;
  flex: 1;
}
.centeet {
  display: flex;
  height: 100%;
}

.leftTree {
  background: #fff;
  position: relative;
  padding: 29px 25px;
  border-right: 1px solid #e7e7e7;
  width: 15%;
  .select {
    margin-bottom: 24px;
  }
}
.color1 {
  color: #888888;
}
.inpts {
  width: 80px !important;
}
.tianjia {
  width: 380px;
  height: 156px;
  background: #f8f8f8;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .color {
    color: #888888;
  }
  .leftShoudong {
    background: #fff !important;
    border-color: #148958 !important;
    color: #148958 !important;
  }

  .marRight {
    margin-left: 16px;
  }
}
.tables {
  padding: 0 24px 24px;
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
}
.top {
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  padding: 24px 24px 0;
}



/deep/ .ant-card-body {
  //background: #F5F8F7;
  background: #F0F2F5;
}

.tabBox {
  padding: 24px 24px 0;
  background: #FFFFFF;
  border-radius: 3px;
}

.cardBox {
  margin-top: 24px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 3px;
}

</style>
